<template>
  <div class="divBox">
    <el-card class="box-card">
        <div class="sousuo">
            <div class="yuangjj">员工交接请慎重，该操作会取消【被交接员工】的员工身份以及名片。并且会将下列【交接内容】中所有选中项的信息转移到【交接到员工】，转移后不可恢复。</div>
                <div class="oselect">
                    <div>
                        <span>被交接员工</span>
                        <Select v-model="coverStaff" style="width: 200px">
                            <Option  v-for="item in staffList" :value="item.uid" :key="item.uid" >{{ item.nickname }}</Option>
                        </Select>
                    </div>
                    <div>
                        <span>交接到员工</span>
                        <Select v-model="receiveStaff" style="width: 200px">
                            <Option v-for="item in staffList" :value="item.uid"  :key="item.uid" >{{ item.nickname }}</Option>
                        </Select>
                    </div>
                </div>
                <div class="jiaojie">
                    <span>交接内容</span>
                    <CheckboxGroup v-model="handoverContent">
                        <Checkbox disabled label="客户"></Checkbox>
                        <Checkbox disabled label="雷达记录"></Checkbox>
                    </CheckboxGroup>
                </div>
                <Button type="primary" class="tijiaop" @click="submit">提交</Button>
            </div>
            <div class="handoverRecord">
                <div>交接记录</div>
                <div class="handoverRecordCoent">

                </div>
            </div>
    </el-card>
  </div>
</template>
<script>
import {
    getAllList,
    transferUser
} from "@/api/buss"
import Vue from "vue";
import formCreate from "@form-create/iview";
Vue.use(formCreate);
import "view-design/dist/styles/iview.css";
import ViewUI from "view-design";
Vue.use(ViewUI);

export default {
  data() {
    return {
      // 选中交接内容
      handoverContent: ["客户","雷达记录"],
      // 员工列表
      staffList: [],
      // 被交接员工
      coverStaff: "",
      // 交接到员工
      receiveStaff: "",
      // 交接记录
      handoverRecordList:[
        {
            uid:1,
            staff:"KC",
            to_uid:2,
            to_staff:"AOMG",
            tiem:"2023-2-22 18:00:00",
            content:["雷达","客户"]
        }
      ],
    }
  },
  mounted(){
    // 获取企业下所有名片
    getAllList().then(res=>{
        this.staffList=res.data
    })
  },
  methods: {
    // 提交
    submit() {
        this.$confirm("确认转移员工下所有客户吗？","温馨提示").then(res=>{
            transferUser({
                uid:this.coverStaff,
                to_uid:this.receiveStaff
            }).then(res=>{
                this.$message({
                    type: 'success',
                    message: res.message,
                });
            }).catch(err=>{
                this.$message({
                    type: 'info',
                    message: err.message,
                });
            })
        }).catch(err=>{
            this.$message({
                type: 'info',
                message: '取消转移',
            })
        })

        
    }
  }
}
</script>
<style lang="stylus" scoped>
    .sousuo {
        // margin: 20px 10px;
        background-color: #fff;
        // padding: 15px 32px;
        .shond {
            vertical-align: middle;
            height: 60px;
            border-bottom: 1px solid #E1E1E1;
            margin-bottom: 20px;
            line-height: 60px;
        }
        .yuangjj {
            border-left: 5px solid #fe6c6f;
            background: #fff6f7;
            width: 100%;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 16px;
        }
        .oselect {
            display: flex;
            // justify-content: space-between;
            // align-items: center;
            // margin-right: 600px;
            div {
                width: 400px;
                span {
                    margin-right: 15px;
                    font-size: 14px;
                    color: #606266;
                }
            }
        }
        .jiaojie {
            margin: 20px 0px;
            width: 400px;
            & > span {
                font-size: 14px;
                color: #606266;
                margin-right: 32px;
            }

            & > div {
                display: inline-block;
            }
        }

        .tijiaop {
            margin: 20px 0px;
        }
    }
    .handoverRecord{
    }
</style>
